<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中样式-class</title>
    <script src="../lib/vue.js"></script>
    <style type="text/css">
         .blue{
             color: darkcyan;
         }
         .thin{
             font-weight: 200;
         }

         .italic{
              font-style: italic;
         }

         .active{
              letter-spacing: 0.5em;
          }
   </style>
</head>
<body>
   <!-- 属性绑定的方式-->
    <div id="app">
   <!-- 1.使用数组-->
        <h2 :class="['blue','thin']">雨后有车驶来，驶过暮色苍白</h2>
   <!-- 2.数组中使用三元表达式-->
        <h2 :class="['blue','thin',flag?'active':'']">旧铁皮往南开</h2>
   <!-- 3.数组中使用对象替代三元表达式，提高可读性-->
        <h2 :class="['blue','thin',{'italic':flag}]">雨后有车驶来，驶过暮色苍白</h2>
   <!-- 4.直接使用对象-->
        <h2 :class="{blue:true,active:true}">雨后有车驶来，驶过暮色苍白</h2>
        <h2 :class="classObj">雨后有车驶来，驶过暮色苍白</h2>
    </div>
<script>
    var vue = new Vue({
        el : '#app',
        data :{
            flag : true,
            classObj : {
                blue:true,
                italic:true
            }
        }
    })
</script>
</body>
</html>